<template>
    <div class="content">
        <div class="left-bottom">
            <div class="title">
                设备操作
            </div>

            <!-- <el-collapse v-model="activeName" accordion v-if="tableData.length > 0">
                <el-collapse-item title="用户传输装置">
                </el-collapse-item>
                <el-collapse-item title="探测器">
                    <div class="monitoring">
                        <el-button @click="getKeyCommandsend(item)" class="finish" v-for="(item, index) in tableData"
                            :key="index"><i class="iconfont zhilingxiafa"></i>{{ item.keyName }}</el-button>
                    </div>
                </el-collapse-item>
            </el-collapse> -->

            <div class="monitoring" v-if="commadn.length > 0">
                <el-button @click="getKeyCommandsend(item)" class="finish" v-for="(item, index) in commadn"
                    :key="index"><i class="iconfont zhilingxiafa"></i>{{ item.keyName }}</el-button>
            </div>

            <!-- <div class="container" v-if="tableData.length > 0">
                <div class="item" v-for="(item, index) in tableData" :key="index">
                    <div class="index">{{ item.groupNo }}</div>
                    <div>
                        <div class="circle-title">{{ item.addressMapping }}</div> -->
                        <!-- <div class="circle-box">
                            <div :class="['circle', item.status ? 'active-circle' : '']">
                                <div class="inner" v-if="item.status"></div>
                            </div>
                            <span>{{ item.status == '1' ? '启动' : '停止' }}</span>
                        </div> -->
                        <!-- <div class="handle">
                            <el-button class="button-new-tag" size="mini" type="primary" @click="onCommand(item2)"
                                v-for="(item2, index2) in item.list" :key="index2">{{ item2.keyName }}</el-button>
                        </div>
                    </div>
                </div>
            </div> -->

            <div v-else style="
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          ">
                <img :src="wugj" style="width: 120px; height: 120px; margin-bottom: 10px"/>
                <div>无指令下发</div>
            </div>
        </div>

    </div>
</template>

<script>
import { reqKeyCommandList } from "@/api/api";
import { mapState } from "vuex";

export default {
    props:['commadn'],
    components: {
    },
    data() {
        return {
            tableData: [],
            activeName: null,
            wugj: require("@assets/images/datav/wugj.png"),
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch: {},
    methods: {
        // 按键指令列表
        async getKeyCommandsend(item) {
            this.$emit('getKeyCommandsend', item)//不这样操作会有遮罩层问题
        },
        onCommand(item) {
            this.$emit('getKeyCommandsend', item)//不这样操作会有遮罩层问题
        },
        // 按键指令列表
        // async getKeyCommand(imei) {
        //     var res = await reqKeyCommandList({
        //         "deviceCode": imei,//设备编号
        //         "usedConfig": "1"//是否配置指令 1已配置 2未配置
        //     });
        //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        //     // this.tableData = res.data.list || []
        //     console.log(res.data.list,'list');
        //     res.data.list.forEach((item) => {
        //         switch (item.layoutType) {
        //         case "1":
        //             // 基本面板
        //             this.tableData.push(item);
        //             break;
        //         }
        //     });
        //     console.log(this.tableData,'this.tableData');
        // },
    },
    created() {
    },
    mounted() { },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
        .height(43);
        width: 100%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../assets/images/datavPop/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;

        i {
            .fontSize(20);
            color: #fff;
        }
    }

    .left-bottom {
        height: 100%;
        // background: rgba(13, 24, 86, 1);
        box-shadow: inset -9px 3px 20px 0px #032b60, inset 9px -3px 20px 0px #032e68;

        .monitoring {
            max-height: 79%;
            // max-height: 20vh;
            overflow-y: auto;
            padding: 10px 15px;
            box-sizing: border-box;
            // display: flex;
            // flex-wrap: wrap;
            // align-items: center;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }
    }
}

.finish {
    border: 1px solid #58c0f9 !important;
    background: #11295e !important;
    height: 40px;
    margin-left: 0;
    padding: 0;
    font-size: 0.8vw;
}

.zhilingxiafa {
    color: #58c0f9;
    margin-right: 5px;
    font-size: 0.8vw;
}

// 折叠
.el-collapse {
    width: 90%;
    margin: 10px auto;
    border-top: none;
    border-bottom: none;
    border-radius: 5px !important;
}

::v-deep .el-collapse-item__header {
    color: #8299c9;
    font-size: 14px;
    // background: linear-gradient(#073068 rgba(6, 33, 152, 0.38), #071867);
    background-color: #041355;
    border: none;
    padding-left: 10px;
    border-radius: 5px !important;
}

::v-deep .el-collapse-item__content {
    color: #fff;
    font-size: 13px;
    border: none !important;
    padding: 0px;
    background-color: transparent !important;
    border-radius: 0 0 5px 5px !important;
}

::v-deep .el-collapse-item__wrap {
    border: none;
    background-color: transparent;
}

.container {
    max-height: 85%;
    overflow-y: auto;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    .item-radio {
        position: relative;
        padding: 10px 15px;
        margin: 5px 5px;
        text-align: center;
    }

    .item {
        position: relative;
        // width: 180px;
        flex: 1;
        // height: 120px;
        // height: 14.5vh;
        // height: 9vh;
        // border: 1px solid #ccc;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #58c0f9 !important;
        background: #11295e !important;
        padding: 15px 4px;

        .index {
            position: absolute;
            top: 5px;
            left: 5px;
            color: #999;
        }

        .handle {
            display: flex;
            justify-content: center;
        }
    }

    .circle-title {
        text-align: center;
        margin-bottom: 10px;
    }

    .circle-box {
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .circle {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            background: #fff;
            border-radius: 50%;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            .inner {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #fff;
            }
        }

        .active-circle {
            background: #7367f0;
            border-color: #7367f0;
        }
    }
}

::v-deep .el-button--mini{
    padding: 6px 7px;
}
</style>